<script>
import { Toast } from 'vant';
import UPopup from '@/components/u-popup.vue';
import UConfirm from '@/components/u-confirm.vue';

export default {
  name: 'withdraw',
  components: { UConfirm, UPopup },
  data() {
    return {
      value: '',
      list:[
        {
          name: '18685559911(黔东南张震)',
          status: '待审核',
          date: '2024年1月28日 02:23:02',
          amount: '105.46'
        },

        {
          name: '18685559911(黔东南张震)',
          status: '已拒绝',
          date: '2024年1月28日 02:23:02',
          amount: '105.46'
        },
        {
          name: '18685559911(黔东南张震)',
          status: '待审核',
          date: '2024年1月28日 02:23:02',
          amount: '105.46'
        },

        {
          name: '18685559911(黔东南张震)',
          status: '已提现',
          date: '2024年1月28日 02:23:02',
          amount: '105.46'
        },

        {
          name: '18685559911(黔东南张震)',
          status: '已提现',
          date: '2024年1月28日 02:23:02',
          amount: '105.46'
        },

      ],
      menuList: [
        {
          label: '全部状态',
          value: 'all'
        },
        {
          label: '待审核',
          value: 'pending'
        },
        {
          label: '已拒绝',
          value: 'rejected'
        },
        {
          label: '已提现',
          value: 'withdrawn'
        }
      ],
      menuListActive: 'all',
      menuShow: false,
          showWithdraw: false,

  };
  },
  methods: {
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      Toast('取消');
    },
    changeActive(item){
      this.menuListActive = item.value;
      this.menuShow = false;
    },
    closeWithdraw() {
      this.showWithdraw = false;
    },
    confirmWithdraw() {
      this.showWithdraw = false;
    },
    goPage(path){
      this.$router.push(path);
    }
  },
  computed: {
    //menuListLabel
    menuListLabel(){
      return this.menuList.find(item => item.value === this.menuListActive).label;
    }
  },
};
</script>

<template>
  <frame-view class="index">
    <van-search
      v-model="value"
      @click="goPage('/index/search')"
      show-action
      shape="round"
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="onCancel"
    >
      <template #action>
        <div style="display: flex;justify-content: right;align-items: center;position: relative">
          <span style="font-size: 28px;color: #222222;" @click="menuShow = true">{{ menuListLabel }}</span>
          <van-icon name="arrow-down" style="font-size: 24px;color: #222222;margin-left: 8px" />
<!--          菜单-->
          <div class="menu" v-if="menuShow">
            <div :class="['menu-item',menuListActive===item.value?'active':'']" v-for="item in menuList" @click="changeActive(item)">{{ item.label }}</div>
          </div>

        </div>
      </template>
    </van-search>
    <div style="display: flex;justify-content: space-between;margin-top: 24px">
      <div style="color: #222222">
        2024年11月
        <van-icon name="arrow-down" size="16" color="#222222" />
      </div>
      <div>
        打款总额: <span style="color: #FF1212">1640.37</span> 元
      </div>
    </div>
    <div style="height: 10px"></div>
    <div style="padding: 32px 24px 24px;font-size: 24px;background-color: #Fff;border-radius: 24px;margin-top: 16px" v-for="item in list">
      <div style="display: flex;justify-content: space-between">
        <p style="font-size: 28px;color: #222222;">{{ item.name }}</p>
        <p :style="{color: item.status==='已提现'?'#BBBBBB':'#FF1212'}">{{ item.status }}</p>
      </div>
      <div style="display: flex;justify-content: space-between;margin-top: 18px;align-items: end">
        <p style="color: #999999;">{{ item.date }}</p>
        <p style="font-size: 40px;font-weight: bold">105.46</p>
      </div>
      <van-divider style="margin-top: 24px" />
      <div style="display: flex;height: 60px;justify-content: space-between">
        <div style="color: var(--primary-color);height: 60px;line-height: 60px" @click="showWithdraw = true">查看提现信息</div>
        <div v-if="item.status === '待审核'">
          <van-button plain round type="danger" style="width: 152px;height: 60px;">拒绝</van-button>
          <van-button round type="info" style="width: 152px;margin-left: 16px;height: 60px;">通过</van-button>
        </div>
      </div>
    </div>
    <div style="height: 80px"></div>
    <!--编辑-->
    <u-confirm position="center" :show-button="false" title="提现信息" :show="showWithdraw" @close="closeWithdraw" @confirm="confirmWithdraw">
      <div style="width: 542px;height: 172px;background: rgba(255,176,134,0.1);border-radius: 20px;font-size: 28px;color: #222222;display: flex;flex-direction: column;justify-content: space-between;margin: 28px auto;padding: 24px">
        <p style="display: flex;align-items: center">
          <span style="color: #999999;">提现方式：</span>银行卡(尾号8668)
        </p>
        <!--        线条-->
        <van-divider style="margin: 0 20px" dashed/>
        <p style="display: flex;align-items: center">
          <span style="color: #999999;">支付账号：</span>18685559911
        </p>

      </div>
    </u-confirm>

  </frame-view>
</template>

<style scoped lang="scss">
.menu{
  position: absolute;
  right: 10px;
  top: 60px;
  width: 167px;
  height: auto;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 0 27px;
  z-index: 1; /* 确保 .menu 的 z-index 设置为 1 或者更低 */
  //阴影
  //box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
//扩散大些
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);//参数分别为：水平偏移，垂直偏移，模糊半径，阴影颜色

  //伪类 三角符在右上角
  &:before{
    content: '';
    position: absolute;
    top: -10px;
    right: 18px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #ffffff;
    z-index: 9999; /* 确保伪元素的 z-index 高于 .menu */
  }
  .menu-item{
    height: 86px;
    line-height: 86px;
    font-size: 28px;
    color: #222222;
    text-align: center;
    border-bottom: 1px solid #f5f5f5;
    transition: all 0.3s;
    &:hover{
      color: var(--primary-color);
      font-weight: bold;
    }
    &.active{
      color: var(--primary-color);
      font-weight: bold;
    }
  }
}

</style>
